<template>
  <div class="box">
    <van-nav-bar
      title="练习题"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-tabs v-model="active" @click="getQuestionList">
      <van-tab v-for="item in questionTypeList" :key="item.id" :title="item.type">
        <div slot="default" class="box">
          <!-- <van-field
            v-model="limitList"
            class="fieldCss"
            center
            clearable
            :label="'批量购买' + item.type + ':'"
            placeholder="100道题起购"
          >
            <template #button>
              <van-button size="mini" type="primary" round @click="getBuyQuestion">点击确定</van-button>
            </template>
          </van-field> -->
          <div class="question_xi" v-for="item in checkQuestionList" :key="item.questionbankid">
              <!-- <div class="question_title">
                <span>出题地：{{ item.from }}</span>
                <span>难度：{{ item.difficulty === '1' ? '简单' : (item.difficulty === '2' ? '一般' : '困难') }}</span>
                <span>总分：{{item.score}}</span>
              </div> -->
              <div class="question_text">
                <div v-if="item.type === '4'">
                  <audio class="audio" controls="controls" :src="'http://upenglish.ayvvv.cn' + item.content"></audio>
                </div>
                <div v-else>
                  <span v-html="item.content"></span>
                </div>
                <div v-for="(item2, index2) in item.question_result" :key="item2.id">
                  <h4>{{ item2.question }}</h4>
                  <div class="question_result">
                    <div v-if="item.question_result.length === 1">
                      <van-radio-group v-model="radio[index2]" :disabled="isShow">
                        <van-radio class="class_p" name="A"  @click="getAnswerQuestion(item.questionbankid)">{{ item2.aoption }}</van-radio>
                        <van-radio class="class_p" name="B"  @click="getAnswerQuestion(item.questionbankid)">{{ item2.boption }}</van-radio>
                        <van-radio class="class_p" name="C" v-if="item2.coption"  @click="getAnswerQuestion(item.questionbankid)">{{ item2.coption }}</van-radio>
                        <van-radio class="class_p" name="D" v-if="item2.doption"  @click="getAnswerQuestion(item.questionbankid)">{{ item2.doption }}</van-radio>
                      </van-radio-group>
                    </div>
                    <div v-else>
                      <div>
                        <van-radio-group v-model="radio[index2]" :disabled="isShow">
                          <van-radio class="class_p" name="A">{{ item2.aoption }}</van-radio>
                          <van-radio class="class_p" name="B">{{ item2.boption }}</van-radio>
                          <van-radio class="class_p" name="C" v-if="item2.coption">{{ item2.coption }}</van-radio>
                          <van-radio class="class_p" name="D" v-if="item2.doption">{{ item2.doption }}</van-radio>
                        </van-radio-group>
                      </div>
                    </div>
                  </div>
                  <div v-if="isShow">
                    <div v-for="(item3, index3) in questionResult" :key="index3">
                      <div v-if="index3 === index2 ? true : false">
                        <div v-if="item3.istrue != 1">
                          <p>正确答案：{{ item3.answer }}</p>
                          <span v-if="questionResult === 1" v-html="questionResult.analysis_content"></span>
                          <span v-else>此题没有解析了</span>
                        </div>
                        <div v-else>
                          <span>恭喜您，答对了</span>
                        </div>
                      </div>
                    </div>
                    <div v-for="item in checkQuestionList" :key="item.questionbankid">
                      <div class="button_bts" v-if="item.type != '3'">
                        <van-button type="info" @click="isShowNow">下一题</van-button>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="item.question_result.length > 1" class="button_bts">
                  <van-button type="info" @click="getAnswerQuestion(item.questionbankid)" v-if="done">提交答案</van-button>
                  <van-button type="info" @click="isShowNow" v-else>下一题</van-button>
                </div>
              </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { questionType, checkQuestion, answerQuestion, buyQuestion } from '@/api/question.js'
import { mapState } from 'vuex'
import { Dialog } from 'vant'
export default {
  data () {
    return {
      active: 0,
      limitList: 100,
      questionTypeList: [],
      loading: false,
      finished: false,
      checkQuestionList: [],
      howGrade: 0,
      howWhere: 0,
      radio: [],
      bigQuestionid: 0,
      questionResult: [],
      queAnswer: false,
      isShow: false,
      Qid: '',
      no: false,
      done: true,
      cost: '价格:￥'
    }
  },

  props: {

  },
  computed: {
    ...mapState(['id'])
  },
  created () {
    this.getQuestionType()
    this.getQuestionList()
  },

  methods: {
    async getQuestionType () {
      const { data: res } = await questionType()
      this.questionTypeList = res.data
      // console.log(this.questionTypeList)
    },
    // getBuyQuestion () {
    //   this.$dialog.confirm({
    //     title: '欢迎光临',
    //     message: '确定购买？'
    //   })
    //     .then(async () => {
    //       const data = await buyQuestion({
    //         limit: this.limitList,
    //         type: this.active + 1,
    //         grade: this.howGrade,
    //         from: this.howWhere,
    //         userid: this.id
    //       })
    //       this.buyQuestionList = data.data
    //       if (this.buyQuestionList.code === 202) {
    //         this.$toast.fail('购买失败，已经没有足够的题')
    //       } else if (this.buyQuestionList.code === 200) {
    //         this.$toast.success('购买成功')
    //       } else {
    //         this.$toast.fail('网络出错，请重试')
    //       }
    //       // console.log(this.buyQuestionList)
    //     })
    //     .catch(() => {
    //       this.$toast('取消购买')
    //     })
    // },
    // 查题
    async getQuestionList () {
      this.howGrade = Number(this.$route.params.id1) + 1
      this.howWhere = Number(this.$route.params.id2) + 1
      const { data } = await checkQuestion({
        type: this.active + 1,
        limit: 1,
        grade: this.howGrade,
        from: this.howWhere,
        questionbankids: this.Qid,
        userid: this.id
      })
      this.checkQuestionList = data.result
      this.isShow = false
      this.radio = []
      console.log(data)
      if (data.code === 205) {
        this.$toast.fail('题目已做完，请您先去购买')
      } else if (data.code === 206) {
        this.$toast.fail({
          message: '暂无试题',
          duration: 500
        })
      }
      if (data.code === 207) {
        Dialog.confirm({
          title: '该年级这套题尚未购买',
          message: this.cost + localStorage.getItem('price') + '    是否进行购买?'
        }).then(async () => {
          const data = await buyQuestion({
            grade: this.howGrade,
            gobuyprice: localStorage.getItem('price'),
            userid: this.id
          })
          if (data.data.code === 200) {
            this.$toast.success('购买成功')
            this.getQuestionList()
          }
        }).catch(() => {
          this.$router.go(-1)
        })
      }
      // this.Qid += data.result[0].questionbankid + ','
    },
    // 提交题
    async getAnswerQuestion (id) {
      // console.log(this.bigQuestionid)
      const radio = this.radio + ''
      const { data } = await answerQuestion({
        qbankid: id,
        answerstr: radio,
        userid: this.id
      })
      console.log(data)
      this.questionResult = data.answer
      var arr1 = []
      this.questionResult.forEach(item => {
        arr1.push(item.answer)
      })
      // console.log(arr + '')
      const arr = arr1 + ''
      // console.log(radio)
      if (radio === arr) {
        this.$toast.success('答对了')
        this.getQuestionList()
        this.radio = []
      } else {
        this.$toast.fail('答错了')
        this.isShow = true
      }
      this.done = false
    },
    isShowNow () {
      this.isShow = false
      this.done = true
      this.radio = []
      this.getQuestionList()
    }
  }
}
</script>

<style scoped lang='less'>
.question_xi {
  padding: 20px;
  padding-bottom: 50px;
  // background-color: orange;
  .question_title {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
.question_result {
  margin: 0 auto;
}
.fieldCss {
  border-radius: 45px;
  background-color: #eeeeeec7;
}
/deep/.van-field__label {
  width: 250px;
}
/deep/.van-field__control {
  border-radius: 25px;
  padding-left: 30px;
  background-color: #fff;
}
.class_p {
  margin-left: 30px;
  padding-bottom: 20px;
}
.button_bts {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
}
audio  {
  width: 400px !important;
  height: 54px;
}
.audio {
  width: 100px;
  height: 50px;
}
</style>
